import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';

interface EChartsWrapperProps {
  option: any;
  style?: React.CSSProperties;
  className?: string;
  loading?: boolean;
  height?: number | string;
  width?: number | string;
}

const Skeleton = ({ height = 320 }) => (
  <div style={{
    height,
    background: 'repeating-linear-gradient(90deg, #f0f0f0 0 40px, #fafafa 40px 80px)',
    borderRadius: 12,
    animation: 'pulse 1.2s infinite',
    margin: '0 auto',
    width: '100%',
    display: 'block',
  }} />
);

const EChartsWrapper: React.FC<EChartsWrapperProps> = ({ option, style, className, loading, height = 320, width = '100%' }) => {
  const [show, setShow] = useState(false);

  // 只在首次挂载时显示骨架屏
  useEffect(() => {
    setShow(true);
  }, []);

  return (
    <div style={{ position: 'relative', width, minHeight: height }} className={className}>
      {!show || loading ? <Skeleton height={typeof height === 'number' ? height : parseInt(height as string, 10) || 320} /> : (
        <ReactECharts option={option} style={{ height, width: '100%', ...style }} />
      )}
    </div>
  );
};

export default EChartsWrapper; 